<template>
	<view class="details">
		<!-- 图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<view class="swiper-item">
					<image class="swiper-img" :src="item.imgUrl" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 详情 -->
		<view class="details-goods">
			<view class="goods-pprice">$399.00</view>
			<view class="goods-oprice">$599.00</view>
			<view class="goods-name">ssssssssssssssssss</view>
		</view>
		
		<view class="">
			<view class="">
				<image class="details-img" src="../../static/img/1.webp" mode=""></image>
			</view>
		</view>
		
		<card cardTitle="看了又看"></card>
		<commondity-list :dataList="dataList"></commondity-list>
		
		<!-- 底部 -->
		<view class="details-foot">
			<view class="iconfont icon-xiaoxi"></view>
			<view class="iconfont icon-gouwuchekong"></view>
			<view class="add-shopcart" @tap="ShowPop">加入购物车</view>
			<view class="purchase" @tap="ShowPop">立即购买</view>
		</view>
		
		<!-- 底部弹出卡片 -->
		<view class="pop" v-show="isShow" @touchmove.stop.prevent="">
			<!-- 蒙层 -->
			<view class="pop-mask" @tap="isShow=!isShow"></view>
			<!-- 内容 -->
			<view class="pop-box" :animation="animationData">
				<view>
					<image class="pop-img" src="../../static/img/4.webp" mode=""></image>
				</view>
				<view class="pop-num">
					<view>数量</view>
					<UniNumberBox
					:min="1"
					
					>
					
					</UniNumberBox>
				</view>
				<view class="pop-sub">qieding</view>
			</view>
		</view>
	</view>
</template>

<script>
	import UniNumberBox from "@/components/uui/uni-number-box/components/uni-number-box/uni-number-box.vue"
	import Card from "@/components/common/Card.vue"
	import CommondityList from "@/components/common/CommondityList.vue"
	export default {
		components:{
			Card,
			CommondityList,
			UniNumberBox
		},
		data() {
			return {
				isShow:false,
				animationData:{},
				swiperList:[
					{imgUrl:"../../static/img/4.webp"},
					{imgUrl:"../../static/img/1.webp"},
					{imgUrl:"../../static/img/2.webp"}
				],
				dataList:[
					{
						id: 1,
						imgUrl: "../../static/img/1.webp",
						name: "ssssssssssssssssssssssss",
						pprice: "229",
						oprice: "659",
						discount: "5.2"
					},
					{
						id: 2,
						imgUrl: "../../static/img/2.webp",
						name: "ssssssssssssssssssssssss",
						pprice: "229",
						oprice: "659",
						discount: "5.2"
					}
				]
			}
		},
		onLoad(e) {
			console.log(e.id);
		},
		onBackPress() {
			// 蒙层打开后对返回按钮功能进行修改,取消蒙层
			if(this.isShow){
				this.isShow = !this.isShow
				return true
			}
		},
		methods: {
			
			ShowPop(){
				this.isShow = !this.isShow
				
				var animation = uni.createAnimation({
					duration:500
				})
				animation.translateY(600).step()
				this.animationData = animation.export()
				setTimeout(()=>{
					animation.translateY(0).step()
					this.animationData = animation.export()
				},200)
			}
		}
	}
</script>

<style scoped>
.details{
	padding-bottom: 90rpx;
}
swiper{
	width: 100%;
	height: 700rpx;
}
.swiper-img{
	width: 100%;
	height: 700rpx;
}
.details-goods{
	text-align: center;
	font-weight: bold;
	font-size: 36rpx;
	padding: 10rpx 0;
}
.details-img{
	width: 100%;
}
.details-foot{
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 90rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
	z-index: 20;
}
.details-foot .iconfont{
	width: 60rpx;
	height: 60rpx;
	border-radius: 100%;
	background-color: #ce4400;
	color: #ffffff;
	text-align: center;
	margin: 0 10rpx;
	line-height: 60rpx;
}
.add-shopcart{
	margin: 0 40rpx;
	padding: 5rpx 30rpx;
	background-color: #ff5500;
	color: #ffffff;
	border-radius: 40rpx;
}
.purchase{
	margin: 0 40rpx;
	padding: 5rpx 30rpx;
	background-color: #49bdfb;
	color: #ffffff;
	border-radius: 40rpx;
}
.pop{
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}
.pop-mask{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
}
.pop-box{
	position: absolute;
	bottom: 90rpx;
	width: 100%;
	height: 600rpx;
	background-color: #ffffff;
}
.pop-img{
	width: 260rpx;
	height: 260rpx;
}
.pop-num{
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
}
.pop-sub{
	line-height: 80rpx;
	background-color: #49dbfb;
	color: #ffffff;
	text-align: center;
}
</style>
